<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../static/css/skins.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/echart/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../lib/layer/layer.min.js"></script>
    <script type="text/javascript" src="../../static/js/MD5/Base64.js"></script>
    <script type="text/javascript" src="../../static/js/MD5/md5.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <script src="../../static/js/tool.js"></script>
    <style type="text/css">
        /* @media screen and (min-width: 1080px) { */
        body {
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            margin: 0 auto;
            padding: 0 auto;
            background-color: transparent;
        }

        body #pic1 .active,
        body #pic2 .active,
        body #pic3 .active,
        body #pic4 .active {
            display: block;
        }

        .header .el-form-item__content {
            /* padding-top: 0.4vh; */
            line-height: 0px
        }

        body .none {
            display: none;
        }

        body .header {
            width: 96vw;
            height: 50px;
            border: 1px solid transparent;
            margin-top: 1%;
            margin-left: 2%;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        body .header div {
            margin-top: 0.2vh;
            margin-left: 1vw;
        }

        body .header .el-form-item__label {
            /* padding-top: 0.4vh; */
        }

        body .header .el-input__inner,
        .el-form-item__label {
            font-size: medium;
            color: #000;
            border: none;
            background-color: transparent
        }

        body .header div p {
            font-size: 1em;
            /* color: #575757; */
        }

        body .middle {
            width: 97vw;
            height: 51vh;
            margin-top: 2vh;
            margin-left: 2vw;
            /* border: 1px solid; */
        }

        body .middle .echart1,
        body .middle .message {
            display: inline-block;
        }

        body .middle .echart1 {
            overflow: hidden;
            width: 68vw;
            height: 30vw;
            border: 1px solid transparent;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        body .middle .message {
            letter-spacing: 1px;
            width: calc(26.7vw - 2px);
            height: 100%;
            margin-left: 1vw;
            border: 1px solid transparent;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        body .middle .message .hide {
            display: none;
        }

        body .middle .message li {
            margin-top: 3px;
            list-style-type: none;
        }

        body .middle .message .layui-card {
            height: inherit;
            margin-bottom: 0px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        body .middle .message .layui-card .layui-card-header {
            margin-left: 10px;
            height: 32px;
            line-height: 31px;
        }

        body .middle .message .layui-card .layui-card-header .layui-card-header-left {
            font-size: 14px;
            color: #000;
            float: left;
            border-bottom: 3px solid;
            padding: 0px 3px;
            font-weight: bold;
        }

        body .middle .message .layui-card .layui-card-header .layui-card-header-right {
            float: right;
            font-size: 10px;
            padding: 0px 5px;
            color: #000;
        }

        body .middle .message .layui-card .layui-card-body {
            margin-left: 10px;
        }

        body .middle .message .layui-card .layui-card-body-li-finish {
            text-align: center;
            line-height: 100px;
            color: #000;
            font-size: 18px;
        }

        body .middle .message .layui-card .layui-card-body-li-none {
            color: #000;
            font-weight: 600;
            font-size: small;
        }

        body .middle .message .layui-card .layui-card-body-li-left {
            margin-left: 2px;
            color: #000;
            font-size: 10px;
            display: inline-block;
            max-width: 80%;
            height: 20px;
            line-height: 20px;
            overflow: hidden;
        }

        body .middle .message .layui-card .layui-card-body-li-right {
            font-size: 12px;
            color: #03a9f4;
            text-decoration: none;
            float: right;
            width: 70px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        body .footer {
            width: 97vw;
            height: calc(34vh - 20px);
            margin-top: 2vh;
            margin-left: 2vw;
        }

        body .footer .echart2,
        body .footer .echart3,
        body .footer .echart4 {
            overflow: hidden;
            display: inline-block;
        }

        body .footer .echart2 {
            width: calc(36vw - 6px);
            height: 100%;
            border: 1px solid transparent;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        body .footer .echart3 {
            width: 31vw;
            height: 100%;
            margin-left: 1vw;
            border: 1px solid transparent;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        body .footer .echart4 {
            width: calc(26.7vw - 2px);
            height: 100%;
            margin-left: 1vw;
            border: 1px solid transparent;
            border-radius: 4px;
            /* 兼容 */
            -webkit-Box-shadow: 0 0 10px #528BFF;
            -moz-box-shadow: 0 0 10px #528BFF;
            /*firefox*/
            -webkit-box-shadow: 0 0 10px #528BFF;
            /*webkit*/
            box-shadow: 0 0 10px #528BFF;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="header" style="display: flex;align-items: center;">
        <el-row>
            <el-col>
                <div>
                    <span>筛选：</span>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-left: 0px;">
            <el-col>
                <el-select v-model="selectDataLabel" placeholder="请选择" @change="changePre" style="width: 100px;">
                    <el-option v-for="item in selectData" :key="item.value" :value="item.value" :label="item.label"
                               v-cloak>
                        {{item.label}}
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
    </div>
    <div class="middle">
        <div class="echart1" id="map">

        </div>
        <div class="message">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-card-header-left">我的代办</div>
                    <span id="unRead"></span>
                    <div class="layui-card-header-right hide" style="cursor: pointer;">更多</div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript">
    let vue = null;
    let mybar1;
    let barChart;
    let pieChart1;
    let pieChart2;
    window.onload = function () {
        let main = {
            data() {
                return {
                    selectData: [],
                    selectDataLabel: "四川",
                    map: null,
                    point: null,
                    marker: null,
                    city:'yn'

                }
            },
            created() {
            },
            mounted() {
                this.loadMap();
            },
            watch: {
                city:{
//                    deep: true,
                    handler: function (newVal){
                        console.log(newVal)
                        //if(newVal!=oldVal){
                          //  this.loadMap();
                        //}
                    }
                }
            },
            methods: {
                async loadChrildMap() {
                    console.log('执行到第二个方法了'+this.city)
                    let chartDom = document.getElementById('map');
                    let myChart = echarts.init(chartDom);
                    myChart.showLoading();
                    let option;
                    $.get('../../static/mapData/yn/'+this.city+'.json', function (geoJson) {
                        myChart.hideLoading();
                        echarts.registerMap('YN', geoJson);
                        myChart.setOption(
                            (option = {
                                title: {
                                    text: '停电预警',
                                    subtext: 'Data from Wikipedia',
                                    sublink: ''
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{b}<br/>{c} (p / km2)'
                                },
                                toolbox: {
                                    show: true,
                                    orient: 'vertical',
                                    left: 'right',
                                    top: 'center',
                                    feature: {
                                        dataView: { readOnly: false },
                                        restore: {},
                                        saveAsImage: {}
                                    }
                                },
                                visualMap: {
                                    min: 800,
                                    max: 50000,
                                    text: ['High', 'Low'],
                                    realtime: false,
                                    calculable: true,
                                    inRange: {
                                        color: ['lightskyblue', 'yellow', 'orangered']
                                    }
                                },
                                series: [
                                    {
                                        name: '香港18区人口密度',
                                        type: 'map',
                                        map: 'YN',
                                        label: {
                                            show: true
                                        },
                                        data: [
                                            { name: '普洱市', value: 20057.34,id:530800 },
                                            { name: '丽江市', value: 15477.48,id:530700 },
                                            { name: '东区', value: 31686.1 },
                                            { name: '南区', value: 6992.6 },
                                            { name: '油尖旺', value: 44045.49 },
                                            { name: '深水埗', value: 40689.64 },
                                            { name: '九龙城', value: 37659.78 },
                                            { name: '黄大仙', value: 45180.97 },
                                            { name: '观塘', value: 55204.26 },
                                            { name: '葵青', value: 21900.9 },
                                            { name: '荃湾', value: 4918.26 },
                                            { name: '屯门', value: 5881.84 },
                                            { name: '元朗', value: 4178.01 },
                                            { name: '北区', value: 2227.92 },
                                            { name: '大埔', value: 2180.98 },
                                            { name: '沙田', value: 9172.94 },
                                            { name: '西贡', value: 3368 },
                                            { name: '离岛', value: 806.98 }
                                        ],
                                        // 自定义名称映射
                                        nameMap: {
                                            'Central and Western': '中西区',
                                            Eastern: '东区',
                                            Islands: '离岛',
                                            'Kowloon City': '九龙城',
                                            'Kwai Tsing': '葵青',
                                            'Kwun Tong': '观塘',
                                            North: '北区',
                                            'Sai Kung': '西贡',
                                            'Sha Tin': '沙田',
                                            'Sham Shui Po': '深水埗',
                                            Southern: '南区',
                                            'Tai Po': '大埔',
                                            'Tsuen Wan': '荃湾',
                                            'Tuen Mun': '屯门',
                                            'Wan Chai': '湾仔',
                                            'Wong Tai Sin': '黄大仙',
                                            'Yau Tsim Mong': '油尖旺',
                                            'Yuen Long': '元朗'
                                        }
                                    }
                                ]
                            })
                        );
                    });
                    option && myChart.setOption(option);
                },
                async loadMap() {
                    let chartDom = document.getElementById('map');
                    let myChart = echarts.init(chartDom);
                    myChart.showLoading();
                    let option;
                    $.get('../../static/mapData/yn/'+this.city+'.json', function (geoJson) {
                        myChart.hideLoading();
                        echarts.registerMap('YN', geoJson);
                        myChart.setOption(
                            (option = {
                                title: {
                                    text: '停电预警',
                                    subtext: 'Data from Wikipedia',
                                    sublink: ''
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{b}<br/>{c} (p / km2)'
                                },
                                toolbox: {
                                    show: true,
                                    orient: 'vertical',
                                    left: 'right',
                                    top: 'center',
                                    feature: {
                                        dataView: { readOnly: false },
                                        restore: {},
                                        saveAsImage: {}
                                    }
                                },
                                visualMap: {
                                    min: 800,
                                    max: 50000,
                                    text: ['High', 'Low'],
                                    realtime: false,
                                    calculable: true,
                                    inRange: {
                                        color: ['lightskyblue', 'yellow', 'orangered']
                                    }
                                },
                                series: [
                                    {
                                        name: '香港18区人口密度',
                                        type: 'map',
                                        map: 'YN',
                                        label: {
                                            show: true
                                        },
                                        data: [
                                            { name: '普洱市', value: 20057.34,id:530800 },
                                            { name: '丽江市', value: 15477.48,id:530700 },
                                            { name: '东区', value: 31686.1 },
                                            { name: '南区', value: 6992.6 },
                                            { name: '油尖旺', value: 44045.49 },
                                            { name: '深水埗', value: 40689.64 },
                                            { name: '九龙城', value: 37659.78 },
                                            { name: '黄大仙', value: 45180.97 },
                                            { name: '观塘', value: 55204.26 },
                                            { name: '葵青', value: 21900.9 },
                                            { name: '荃湾', value: 4918.26 },
                                            { name: '屯门', value: 5881.84 },
                                            { name: '元朗', value: 4178.01 },
                                            { name: '北区', value: 2227.92 },
                                            { name: '大埔', value: 2180.98 },
                                            { name: '沙田', value: 9172.94 },
                                            { name: '西贡', value: 3368 },
                                            { name: '离岛', value: 806.98 }
                                        ],
                                        // 自定义名称映射
                                        nameMap: {
                                            'Central and Western': '中西区',
                                            Eastern: '东区',
                                            Islands: '离岛',
                                            'Kowloon City': '九龙城',
                                            'Kwai Tsing': '葵青',
                                            'Kwun Tong': '观塘',
                                            North: '北区',
                                            'Sai Kung': '西贡',
                                            'Sha Tin': '沙田',
                                            'Sham Shui Po': '深水埗',
                                            Southern: '南区',
                                            'Tai Po': '大埔',
                                            'Tsuen Wan': '荃湾',
                                            'Tuen Mun': '屯门',
                                            'Wan Chai': '湾仔',
                                            'Wong Tai Sin': '黄大仙',
                                            'Yau Tsim Mong': '油尖旺',
                                            'Yuen Long': '元朗'
                                        }
                                    }
                                ]
                            })
                        );
                    });
                    option && myChart.setOption(option);
                    let that=this;
                    myChart.on('click', function (params) {
                        that.city=params.data.id;
                        console.log(that.city)
                        that.loadChrildMap()
                    });
                },

                showStatInfo(){
                },
                //切换地区
                changePre() {
                }
                //

            }
        }

        vue = Vue.extend(main);
        vue = new vue().$mount('#app');
        $(window).resize(function () {
            setTimeout("resizeWindow()", 1000);
        });
    }

    function resizeWindow() {
        mybar1.resize();
        barChart.resize();
        pieChart1.resize();
        pieChart2.resize();
    }

    function goToMenu(id, name, path) {
        let realPath = path + '?menu_id=' + id
        Tool.openTabEvents(realPath, name, {}, '../sys/sys-index.html')
    }
</script>

</html>